<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pl15 pr15 pb25">
					<view class="mt20 area_block_1">
						<view class="pl20 pr20 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备类型</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChange" :value="typeId" :range="types"
											range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorOne }">{{types[index].name}}</text>
										</picker>
									</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr20 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备吨位</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChangeTwo" :value="weightId"
											:range="weights" range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorTwo }">{{weights[indexTwo].name}}</text>
										</picker>
									</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr20 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">正反方向</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChangeThree" :value="directId"
											:range="directions" range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorThree }">{{directions[indexThree].name}}</text>
										</picker>
									</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr20 scaley_1">
							<view class="flex_box aic">
								<view class=" w170 fs30 cor_000">所在区域</view>
							<view class="item">
								<view class="sel_area_sty">
									<view class="" @click="getSSQData();">{{address}}</view>
									<u-select v-model="show" mode="mutil-column-auto" :list="cityTree"
										@confirm="confirm"></u-select>
								</view>
							</view>
							<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
						</view>
					</view>

					<view class="pl20 pr20">
						<view class="flex_box aic">
						<view class="w185 fs30 cor_000">联系电话</view>
						<view class="item">
							<view class="item">
								<input type="number" class="ipt_02" placeholder="请输入联系电话" v-model="phone"
									placeholder-style="color: #B2B2B2 ;">
							</view>
						</view>
						<image :lazy-load="true" src="/static/icon_arrow_4.png" class="vh ml20 img15"></image>
					</view>
				</view>

				<view class="pl20 pr20">
					<view class="flex_box aic">
						<view class="w185 fs30 cor_000">薪资(/小时)</view>
								<view class=" item">
							<view class="item">
								<input type="number" class="ipt_02" placeholder="请输入薪资" v-model="salary"
									placeholder-style="color: #B2B2B2 ;">
							</view>
						</view>
						<image :lazy-load="true" src="/static/icon_arrow_4.png" class="vh ml20 img15"></image>
					</view>
				</view>

			</view><!-- area_block_1 -->

			<view class="mt20 area_block_1 pa25">
				<view class="ml10 mt10 fs30 cor_000">工作性质</view>
				<view class="mt35 flex_box aic">
					<view class="mr35">
						<radio-group @change="radioChangeOne">
							<label class="radio df aic fs30 cor_000">
								<radio value="1" checked="true" color="#F23A3A" />长期
							</label>
							<label class="mt30 radio df aic fs30 cor_000">
								<radio value="2" color="#F23A3A" />短期
							</label>
						</radio-group>
					</view>
					<view class="item">
						<view class="mt90" :class="radioFlagOne ? '' : 'vh'">
							<input type="number" class="ipt_01" v-model="duration" placeholder="输入时间期限"
								placeholder-style="color: #B2B2B2;">
						</view>
					</view>
				</view>
			</view><!-- area_block_1 -->

			<view class="mt20 area_block_1 pa25">
				<view class="ml10 mt10 fs30 cor_000">结算方式</view>
				<view class="mt35 flex_box aic">
					<view class="mr35">
						<radio-group @change="radioChangeTwo" v-model="settleId">
							<label class="radio df aic fs30 cor_000">
								<radio value="1" :checked="settleId == 1" color="#F23A3A" />日结
							</label>
							<label class="mt30 radio df aic fs30 cor_000">
								<radio value="2" :checked="settleId == 2" color="#F23A3A" />月结
							</label>
							<label class="mt30 radio df aic fs30 cor_000">
								<radio value="3" :checked="settleId == 3" color="#F23A3A" />其他
							</label>
						</radio-group>
					</view>
					<view class="item">
						<view class="mt160" :class="radioFlagTwo ? '' : 'vh'">
							<input type="text" class="ipt_01" placeholder="输入结算方式" v-model="settle"
								placeholder-style="color: #B2B2B2;">
						</view>
					</view>
				</view>
			</view><!-- area_block_1 -->

			<view class="mt20 pa25 area_block_1">
				<view class="ml10 mt10 fs30 cor_000">工作描述</view>
				<view class="mt20 textarea_area_line">
					<textarea class="textarea_01" @input="introduceChange" @blur="introduceConfirm"
						@confirm="introduceConfirm" placeholder="描述您招聘的工作细节或者员工福利等" placeholder-style="color: #B2B2B2"
						v-model="introduce"></textarea>
					<view class="mt15 fs22 cor_B2B"><text>{{intro_lenght}}</text>/150字</view>
				</view>
			</view>

		</view>
	</view><!-- menu_content_box -->
	<!-- 发布-按钮 -->
	<view class="consult_immediately_btn" @tap="publishRecruit">发布</view>
	</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getRecruitInfoApi,
		updateRecruitApi,
		getPublishFilterApi,
		getCityTreeApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				index: 0,
				indexTwo: 0,
				indexThree: 0,
				ColorOne: true,
				ColorTwo: true,
				ColorThree: true,
				region: ['请选择所在省市区', '', ''],
				region_code: [0, 0, 0],
				regionColor: true,
				radioFlagOne: false, //false代表选择的输入框未显示
				radioFlagTwo: false, //false代表选择的输入框未显示
				types: [{
					"id": 1,
					"name": "履带式"
				}],
				typeId: 0,
				weights: [{
					"id": 1,
					"name": "小挖（6吨以下）"
				}],
				weightId: 0,
				directions: [{
					"id": 1,
					"name": "正方向，左右旋转"
				}],
				directId: 1,
				durationId: 0,
				duration: 0,
				settleId: 1,
				settle: '',
				phone: '',
				introduce: '',
				intro_lenght: 0,
				userId: uni.getStorageSync('userId'),
				salary: 0,
				cityTree: [],
				sheng_index: 0,
				cityId: 0,
				show: false,
				address: '获取省市区数据',
				id: 0,
			}
		},
		onLoad(options) {
			if (!options.id) {
				toast('参数不正确！');
				setTimeout(function() {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
			} else {
				this.id = options.id;
			}
			this.getRecruitInfo();
			this.getPublishFilter();
			this.getCityTree();

		},
		onBackPress(options) {
			
		    uni.redirectTo({
		    	url: '/pages/my_recruitment/my_recruitment'
		    })
			return true;
		},
		
		methods: {
			getSSQData: function() {
				this.show = true
			},

			confirm: function(e) {
				this.cityId = e[1].value;
				this.address = e[0].label + e[1].label + e[2].label;
			},

			onchange(e) {
				const value = e.detail.value
			},
			onnodeclick(node) {},

			getRecruitInfo() {
				let that = this;
				showLoading('加载中');
				getRecruitInfoApi({
					id: that.id
				}).then(res => {
					that.id = res.data.id,
						that.userId = res.data.userId,
						that.typeId = res.data.typeId,
						that.weightId = res.data.weightId,
						that.directId = res.data.directId,
						that.salary = res.data.salary,
						that.cityId = res.data.cityId,
						that.durationId = res.data.durationId,
						that.duration = res.data.duration,
						that.settleId = res.data.settleId,
						that.settle = res.data.settle,
						that.introduce = res.data.introduce,
						that.phone = res.data.phone,
						that.intro_lenght = that.introduce.length
					hideLoading();
					if (that.settleId == 3) {
						that.radioFlagTwo = true;
					}
				}).catch(err => {
					hideLoading();
				})
			},
			getPublishFilter() {
				let that = this;
				showLoading('加载中');
				getPublishFilterApi({

				}).then(res => {
					that.types = res.data.types;
					that.weights = res.data.weights;
					that.directions = res.data.directions;
					for (let i in that.directions) {
						if (that.directions[i].id == that.directId) {
							that.indexThree = i;
						}
					}
					for (let i in that.weights) {
						if (that.weights[i].id == that.weightId) {
							that.indexTwo = i;
						}
					}
					for (let i in that.types) {
						if (that.types[i].id == that.typeId) {
							that.index = i;
						}
					}
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			directionChange(e) {
				console.log(e);
				console.log(this.durationId)
			},

			getCityTree() {
				let that = this;
				getCityTreeApi({

				}).then(res => {
					this.cityTree = res.data
					for (let i in this.cityTree) {
						if ((this.cityTree[i].value + '').substring(0, 2) == (this.cityId + '').substring(0, 2)) {
							console.log('aaaa，找到你了');
							for (let j in this.cityTree[i].children) {
								for (let k in this.cityTree[i].children[j].children) {
									if (this.cityTree[i].children[j].children[k].value == this.cityId) {
										this.address = this.cityTree[i].label + this.cityTree[i].children[j]
											.label + this.cityTree[i].children[j].children[k].label
										break;
									}
								}
							}
						}
					}
				}).catch(err => {

				})
			},

			bindPickerChange: function(e) { //请选择设备类型
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorOne = false
				} else {
					this.ColorOne = true
				}
				this.index = e.target.value;
				console.log(this.index);
				for (let i in this.types) {
					if (i == this.index) {
						this.typeId = this.types[i].id
					}
				}
			},
			bindPickerChangeTwo: function(e) { //请选择设备品牌
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorTwo = false
				} else {
					this.ColorTwo = true
				}
				this.indexTwo = e.target.value
				for (let i in this.weights) {
					if (i == this.indexTwo) {
						this.weightId = this.weights[i].id
					}
				}
			},
			bindPickerChangeThree: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorThree = false
				} else {
					this.ColorThree = true
				}
				this.indexThree = e.target.value
				for (let i in this.directions) {
					if (i == this.indexThree) {
						this.directId = this.directions[i].id
					}
				}
			},

			radioChangeOne: function(e) {
				if (e.detail.value == "2") {
					this.radioFlagOne = true
				} else {
					this.radioFlagOne = false
				}
				this.durationId = e.detail.value;
			},
			radioChangeTwo: function(e) {
				if (e.detail.value == "3") {
					this.radioFlagTwo = true
				} else {
					this.radioFlagTwo = false
				}
				this.settleId = e.detail.value;
			},
			introduceChange(e) {
				console.log(e.detail.value);
				this.intro_lenght = e.detail.value.length;
				if (this.intro_lenght > 150) {
					toast('工作介绍长度不得超过150个字符');
					return false;
				}
			},
			introduceConfirm(e) {
				this.introduce = e.detail.value;
				if (this.introduce.length > 150) {
					toast('工作介绍长度不得超过150个字符');
					return false;
				}
			},
			publishRecruit() {
				let that = this;
				//showLoading('加载中');
				for (let i in this.types) {
					if (i == this.index) {
						this.typeId = this.types[i].id;
					}
				}
				for (let i in this.weights) {
					if (i == this.indexTwo) {
						this.weightId = this.weights[i].id;
					}
				}
				for (let i in this.directions) {
					if (i == this.indexThree) {
						this.directId = this.directions[i].id;
					}
				}
				if (this.durationId == 0) {
					this.durationId = 1;
				}
				if (this.durationId == 2 && !this.duration) {
					toast('请输入工作时间期限');
					return false;
				}
				if (this.settleId == 0) {
					this.settleId = 1;
				}
				if (this.settleId == 3 && !this.settle) {
					toast('请输入结算方式');
					return false;
				}
				if (!this.salary || this.salary < 1) {
					toast('请输入薪资');
					return false;
				}
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					toast('手机号不合法，请重新输入');
					return false;
				}
				if (this.introduce.length < 1 || this.introduce.length > 150) {
					toast('工作描述最多输入150个字符');
					return false;
				}

				updateRecruitApi({
					id: that.id,
					userId: uni.getStorageSync('userId'),
					typeId: that.typeId,
					weightId: that.weightId,
					directId: that.directId,
					salary: that.salary,
					cityId: that.cityId,
					durationId: that.durationId,
					duration: that.duration,
					settleId: that.settleId,
					settle: that.settle,
					introduce: that.introduce,
					phone: that.phone
				}).then(res => {
					toast('提交成功！');
					uni.redirectTo({
						url: '/pages/my_recruitment/my_recruitment'
					});
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 94rpx;
		line-height: 94rpx;
		text-align: right;
		font-size: 28rpx;
		color: #0A0A0A;
		background: transparent;
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		padding: 0 25rpx;
		height: 70rpx;
		line-height: 68rpx;
		text-align: right;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: #fff;
		border: 1px solid #e7e5e5;
		border-radius: 0;
		outline: none;
	}

	.ipt_02 {
		display: inline-block;
		width: 100%;
		padding: 0;
		height: 94rpx;
		line-height: 94rpx;
		text-align: right;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: #fff;
		border: none;
		border-radius: 0;
		outline: none;
	}

	.textarea_area_line {
		padding: 20rpx;
		border: 1px solid #e7e5e5;
	}

	.textarea_area_line .textarea_01 {
		display: inline-block;
		width: 100%;
		padding: 0rpx;
		height: 245rpx;
		line-height: 40rpx;
		text-align: left;
		padding: 0;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}
</style>
